<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="data-view">
        <el-card id="main1"></el-card>
        <el-card id="main2" v-loading="loading"></el-card>
    </div>
</template>
<script>
import {dataview} from '@/api/api'
export default {
    data(){
        return {
            loading:true,
        }
    },
    created(){
        dataview().then(res=>{
            if(res.data.status==200){
                let {legend,xAxis,series}=res.data.data[0]//解构
                this.draw(legend,xAxis,series)
                this.loading=false
            }
        }).catch(err=>{
            throw err
        })
    },
    mounted(){
        let myChart = this.$echarts.init(document.getElementById('main1'))
        myChart.setOption({
            title:{
                text:'汪汪幼儿园'
            },
            tooltip:{},
            xAxis:{
                data:['边牧','柴犬','金毛','二哈','柯基']
            },
            yAxis:{
                max:10
            },
            series:[{
                name:'狗数',
                type:'bar',
                data:[8,4,5,2,6],
            }]
        })
    },
    methods:{
        draw(legend,xAxis,series){
            let myChart1 = this.$echarts.init(document.getElementById('main2'))
            let option={
                title:{
                    text:'动物被访问量'
                },
                tooltip:{
                    trigger:'axis'
                },
                legend:{
                    data:legend
                },
                xAxis:{
                    type:'category',
                    data:xAxis
                },
                yAxis:{
                    type:'value'
                },
                series:series
            }
            myChart1.setOption(option)

        }
    }
}
</script>
<style lang="scss" scoped>
.data-view{
    width: 100%;
    display: flex;
    #main1,#main2{
        height: 500px;
        width: 50%;
    }
}
</style>